import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: '网页的页签栏标题',
    home: Scaffold(
      // 顶部操作栏
      appBar: AppBar(
        title: Text('标题'),
        backgroundColor: Colors.pink,
      ),
      // 配出正文主题部分
      body: Main(),
    ),
  ));
}

class Main extends StatefulWidget {
  const Main({Key? key}) : super(key: key);

  @override
  _MainState createState() => _MainState();
}

class _MainState extends State<Main> {
  Dio dio = Dio();

  List _orderList = [];

  @override
  void initState() {
    loadData();
    super.initState();
  }

  void loadData() async {
    Response res = await dio.get('https://mock.boxuegu.com/mock/1172/orders');

    setState(() {
      _orderList = res.data;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
       Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
        return OrderDetail();
       }));
      },
      child: Container(
        padding: EdgeInsets.all(5),
        // 1. 使用build构造函数
        child: ListView.builder(
          itemCount: _orderList.length,
          itemBuilder: (context, index) {
            Map data = _orderList[index];
            return Container(
              padding: EdgeInsets.all(5),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Container(
                    margin: EdgeInsets.only(bottom: 10, top: 10),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(data['createTime']),
                        Text(
                          '待发货',
                          style: TextStyle(
                              color: Colors.amber, fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  )
                  // 1. 顶部创建时间 和 待发货
                  ,
                  // 2.  图片+商品接受
                  Row(
                    children: [
                      Container(
                        child: Image.network(data['image'], width: 100),
                        margin: EdgeInsets.only(right: 10),
                      ),
                      Expanded(
                          child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Expanded(child: Text(data['name'])),
                              Text('x' + data['totalNum'].toString()),
                            ],
                          ),
                          Padding(
                            padding: EdgeInsets.only(top: 10, bottom: 10),
                            child: Text(data['attrsText']),
                          ),
                          Text('¥' + data['curPrice'].toString()),
                        ],
                      ))
                    ],
                  ),
                  Text('合计: 300'),
                  Container(
                    child: Text('再次购买'),
                    decoration: BoxDecoration(border: Border.all(width: 2)),
                  )
                ],
              ),
            );
          },
        )),
    );
  }
}



class OrderDetail extends StatefulWidget {
  const OrderDetail({Key? key}) : super(key: key);

  @override
  State<OrderDetail> createState() => _OrderDetailState();
}

class _OrderDetailState extends State<OrderDetail> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('订单详情'),
      ),
      body: Center(
        child: TextButton(
          child: const Text(
            '点击返回订单列表页',
            style: TextStyle(fontSize: 24.0),
          ),
          onPressed: () {
            // 路由返回上一级页面
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}